
import React, { Component } from 'react';
import { Flex } from 'antd-mobile'

// 1.0 在http_biz.js中定义方法 get_News_Data()
// 2.0 导入get_News_Data
import { get_News_Data } from '../utils/http_biz.js'
// 3.0 在News组件的 componentDidMount方法中调用之
// 4.0 在state中定义一个数组，名字叫做news，同时要 给其设置值
// 5.0 改造render函数中的 className="news-item" div，遍历生成之

class News extends Component {
    state = {
        news: [
            {
                "id": 1,
                "title": "置业选择 | 安贞西里 三室一厅 河间的古雅别院",
                "imgSrc": "/img/news/1.png",
                "from": "新华网",
                "date": "两天前"
            }]
    }
    // // 3.0 在News组件的 componentDidMount方法中调用之
    async componentDidMount() {
        let { body } = await get_News_Data();
        this.setState({ news: body })
    }

    render() {
        return (<div>
            <h3 className="title">最新资讯</h3>

            {/* 新闻列表的每一项的静态结构 */}
            {
                this.state.news.length > 0 &&
                this.state.news.map(item => (
                    <div className="news-item" key={item.id}>
                        <div className="imgwrap">
                            <img
                                className="img"
                                src={`https://api-haoke-web.itheima.net${item.imgSrc}`}
                                alt=""
                            />
                        </div>
                        <Flex className="content" direction="column" justify="between">
                            <h3 className="title">{item.title}</h3>
                            <Flex className="info" justify="between">
                                <span>{item.from}</span>
                                <span>{item.date}</span>
                            </Flex>
                        </Flex>
                    </div>
                ))
            }


        </div>);
    }
}

export default News;